import {
  CaretRightOutlined,
  LayoutOutlined,
  MenuOutlined
} from '@ant-design/icons';
import { Collapse, Radio } from 'antd';
import React from 'react';
import ReactDragListView from 'react-drag-listview/lib/index.js';

import { LayerInfoFE } from '@/pages/TemplateEditor/interface';

import { DEFAULT_ACTIVE_LAYER } from '../../../../constant';
import styles from './index.module.less';
import Layer from './Layer';

const { Panel } = Collapse;

interface Props {
  activeKey: string;
  layers: LayerInfoFE[];
  disableNewLayer: boolean;
  screenSize: string;
  disableProductLayer: boolean;
  onChange: (
    index: number,
    data: LayerInfoFE,
    needUpdateForm?: boolean,
    needRerenderScreen?: boolean
  ) => void;
  onCopy: (index: number) => void;
  onRemove: (index: number) => void;
  onSetActive: (key: string) => void;
  onUpdate: (layers: LayerInfoFE[]) => void;
  onSetCropLayerId: (id: string) => void;
  setScreenSize: (size: string) => void;
}

const LayerList = ({
  activeKey,
  layers,
  disableNewLayer,
  disableProductLayer,
  onChange,
  onCopy,
  onRemove,
  onSetActive,
  onUpdate,
  screenSize,
  setScreenSize,
  onSetCropLayerId
}: Props): JSX.Element => {
  const totalNumber = (layers || []).length;

  const templateSize = [
    {
      label: '1000x1000',
      value: '1000x1000',
      item_remark: 'image stop template size',
      is_deleted: 0,
      release_status: 1
    },
    {
      label: '1010x1200',
      value: '1010x1200',
      item_remark: 'image stop template size',
      is_deleted: 0,
      release_status: 1
    },
    {
      label: '1910x1000',
      value: '1910x1000',
      item_remark: 'image stop template size',
      is_deleted: 0,
      release_status: 1
    }
  ];

  const handleSort = (from: number, to: number): void => {
    // 因为展示顺序是倒序，这里需要做减法
    const fromIndex = totalNumber - from - 1;
    const toIndex = totalNumber - to - 1;

    const data = [...layers];
    const item = data.splice(fromIndex, 1)[0];
    data.splice(toIndex, 0, item);

    // 更新z字段
    data.forEach((item, index) => {
      item.data.z = index;
    });

    onUpdate(data);
  };

  const handleScreenSizeChange = (e): void => {
    setScreenSize(e.target.value);
  };

  return (
    <>
      <ReactDragListView
        nodeSelector={`.${styles['drag-row']}`}
        handleSelector={`.${styles['drag-icon']}`}
        lineClassName={styles['drag-line']}
        onDragEnd={handleSort}
        dragDisabled={(): boolean => {
          return true;
        }} // 设置不可拖拽的条件
      >
        <Collapse
          accordion
          activeKey={activeKey}
          onChange={onSetActive}
          expandIconPosition="start"
          className={styles.container}
          expandIcon={({ isActive }): React.ReactNode => (
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div className="pr-3">
                <MenuOutlined className={styles['drag-icon']} />
              </div>{' '}
              <CaretRightOutlined rotate={isActive ? 90 : 0} />
            </div>
          )}
          destroyInactivePanel
        >
          {[...layers].reverse().map((layer, index) => (
            <Layer
              layer={layer}
              key={layer.data.id}
              disableNewLayer={disableNewLayer}
              disableProductLayer={disableProductLayer}
              index={totalNumber - index - 1}
              onCopy={onCopy}
              onUpdate={onChange}
              onRemove={onRemove}
              onSetCropLayerId={onSetCropLayerId}
              screenSize={screenSize}
            />
          ))}
        </Collapse>
      </ReactDragListView>
      <Collapse
        accordion
        expandIconPosition="start"
        className={styles['frame-collapse']}
        expandIcon={({ isActive }): React.ReactNode => (
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <CaretRightOutlined rotate={isActive ? 90 : 0} />
          </div>
        )}
        destroyInactivePanel
        activeKey={activeKey}
        onChange={onSetActive}
      >
        <Panel
          header={
            <>
              <LayoutOutlined className="mr-2" />
              Frame
            </>
          }
          key={DEFAULT_ACTIVE_LAYER}
        >
          <div className="mb-4">Size</div>
          <Radio.Group value={screenSize} onChange={handleScreenSizeChange}>
            {templateSize?.map(({ label, value }, index) => (
              <Radio value={value} key={index}>
                {label}
              </Radio>
            ))}
          </Radio.Group>
        </Panel>
      </Collapse>
    </>
  );
};

export default LayerList;
